<template>
  <el-dialog :title="title" :visible.sync="openDialog" :close-on-click-modal="false">
    <el-form ref="form" :model="columns" label-width="100px">
      <el-form-item v-for="(field, key) of columns" :key="key" :label="field.title">
        <!--段落-->
        <el-input v-if="field.type === 'text'" v-model="columns[key].value" autosize type="textarea" />
        <!--日期-->
        <el-date-picker v-else-if="field.type === 'date'" v-model="columns[key].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;" />
        <!--文件-->
        <div v-else-if="field.type === 'file'" class="flex">
          <el-input v-model="columns[key].value" type="text" readonly class="flex1" />
          <el-avatar class="mg-left-10" size="large" shape="square" fit="contain" :src="columns[key].value">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
          </el-avatar>
          <el-upload class="mg-left-10" action="/api/admin/upload/upload" :show-file-list="false" :on-success="(res) => {uploadSuccess(key, res)}"><el-button type="primary">上传</el-button></el-upload>
        </div>
        <!--选择-->
        <el-select v-else-if="field.type === 'select'" v-model="columns[key].value" style="width: 100%;">
          <el-option v-for="(item, index) of field.items" :key="key + index" :value="item.value" :label="item.label" :select="columns[key].value === item.value" />
        </el-select>
        <!--选择城市-->
        <div v-else-if="field.type === 'city'">
          <city v-if="openDialog" style="width: 100%;" :city="parseInt(columns[key].value)" :len="field.len" @change="(v) => columns[key].value = v" />
        </div>
        <!--普通文本-->
        <el-input v-else v-model="columns[key].value" type="text" />
      </el-form-item>
      <el-form-item>
        <el-button @click="openDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import city from './components/city'
export default {
  name: 'Create1',
  emits: ['submit'],
  components: { city },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      openDialog: false,
      columns: {}
      // columns格式说明
      // {
      //  name: { type: 'string', value: '', title: '姓名' }, // 文字
      //  desc: { type: 'text', value: '', title: '简介' },   // 段落
      //  age: { type: 'number', value: '25', title: '年龄' },// 数字
      //  time: { type: 'date', value: '', title: '生日' },   // 日期
      //  img: { type: 'file', value: '', title: '头像' },    // 文件
      //  sex: { type: 'select', value: '', title: '性别', items: [{ value: 0, label: '男'}, {value: 1, label: '女' }] } // 选择
      // }
    }
  },
  watch: {
    formData() {
      // 这里无法触发
      this.columns = this.formData
      console.log('form-data 改变了')
      console.log(this.columns)
    }
  },
  mounted() {
    console.log('挂载完毕')
  },
  created() {
    console.log('初始化')
    this.columns = this.formData
  },
  methods: {
    open() {
      this.openDialog = true
      this.columns = this.formData // watch无法触发改变事件，只能这里来切换
      this.$forceUpdate()
    },
    close() {
      this.openDialog = false
    },
    submit() {
      const values = {}
      for (const field in this.columns) {
        values[field] = this.columns[field].value
      }
      this.$emit('submit', values)
      console.log(values)
    },
    uploadSuccess(key, val) {
      // val: { code: 200, data: 'xxx' }
      this.columns[key].value = val.data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
